<template>
  <div class="inventry">
    <el-tabs v-model="activeName" @tab-click="handleOther">
      <el-tab-pane :label="$t('market.receiveCollect')" name="first">
        <materCollect @check="checkMater" />
      </el-tab-pane>
      <el-tab-pane :label="$t('market.receiveDetail')" name="two">
        <mater-stock ref="detail" :fnumber="fnumber" />
      </el-tab-pane>
      <el-tab-pane :label="$t('menu.stockAge')" name="stockAge">
        <stockAge />
      </el-tab-pane>
      <el-tab-pane :label="$t('menu.alarmInventory')" name="alarmInventory">
        <alarmInventory />
      </el-tab-pane>
      <el-tab-pane name="stockManagement" :label="$t('market.stockManagement')">
        <stockManagement />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  components: {
    stockAge: () => import('@/views/repertory/stockAge'),
    alarmInventory: () => import('@/views/repertory/alarmInventory'),
    materStock: () => import('@/views/repertory/inventory/component/materStock'),
    stockManagement: () => import('@/views/production/planManagement/planReport/stockManagement'),
    materCollect: () => import('@/views/repertory/inventory/component/materCollect')
  },
  data() {
    return {
      activeName: 'first',
      fnumber: ''
    }
  },
  methods: {
    handleOther(tab) {
      if (tab.name === 'two') {
        // this.$refs.detail.handleGetUntreated()
      }
    },
    checkMater(ev) {
      this.activeName = 'two'
      this.fnumber = ev
      this.$refs.detail.handleGetUntreated(ev)
    }
  }
}
</script>

<style scoped lang="scss">
.inventry {
  background-color: #fff;
  padding: 10px;
}
</style>

